﻿@using System.Globalization
@model Illinois.UI.Models.BurnDownViewModel

@{
  ViewBag.Title = "BurnDown Chart - Details";
}

<h2>@ViewBag.Title</h2>

<h3>@Model.Title from @Html.DisplayFor(model => model.Start) until @Html.DisplayFor(model => model.End)</h3>

<style type="text/css">
  #chart
  {
    border: 1px solid #ccc;
  }

  #tbLabels
  {
    border: 0px solid #ccc;
    width: 802px;
  }

  input
  {
    font-family: Verdana;
  }

  #tdLeft
  {
    width: 0px;
  }

  #tdRight
  {
    width: 0px;
  }

  #tdPoints
  {
    text-align: center;
    width: @string.Format("{0}%", Convert.ToInt16((1.0 / Model.Labels.Count()) * 100));
  }

  .points
  {
    width: 20px;
  }
</style>

<script src="~/Scripts/Views/BurnDown/Details.js"></script>

<script type="text/javascript">
  // global data from vm
  var labels = ('@Model.LabelsFlat').split(',');
  var storyPoints = ('@Model.StoryPointsListFlat').split(',');

  $(document).ready(function () {
    var canvas = $('#chart');
    var globalOffset = 40;
    var manager = new BurnDownManager(canvas, globalOffset, labels, storyPoints);
    manager.drawChart();

    $('.points').change(function () {
      var points = $(this);
      var request = $.ajax({
        url: '/BurnDown/UpdateRemainings',
        type: 'GET',
        data: { burnDownId: @Model.Id, order: points.attr('data-order'), id: points.attr('data-id'), points: points.val() },
        dataType: 'json',
        async: false
      });

      request.done(function (data) {
        window.location.href = data.redirectToUrl;
      });

      request.fail(function (jqXhr, textStatus) {
        alert("Request failed: " + textStatus);
      });
    });
  });
</script>

<canvas id="chart" width="800" height="400">
  <p>&lt;canvas&gt; is not supported in this browser.</p>
</canvas>

<table id="tbLabels">
  <tr>
    <td id="tdLeft"></td>
    @for (var i = 0; i < Model.Labels.Count(); i++)
    {
      <td id="tdPoints">
        <input type="text" maxlength="3" class="points"
          @(i == 0 ? "readonly" : string.Empty)
               data-order="@i"
               data-id="@(i <= (Model.StoryPointsList.Count() - 1) ? Model.StoryPointsList.OrderBy(e => e.Order).ToArray()[i].Id.ToString(CultureInfo.InvariantCulture) : string.Empty)"
               value="@(i <= (Model.StoryPointsList.Count() - 1) ? Model.StoryPointsList.OrderBy(e => e.Order).ToArray()[i].Value.ToString(CultureInfo.InvariantCulture) : string.Empty)"/>
      </td> 
    }
    <td id="tdRight"></td>
  </tr>
</table>

<div class="btn-group">
  <a class="btn" href="@Url.Action("Index", "BurnDown")"><i class="icon-list"></i> List</a>
</div>
